<template>
  <div class="sort-wrap">
    <div class="fixed header-wraper" style="z-index: 1">
        <van-search
          left-icon="wap-nav"
          placeholder="请输入搜索关键词"
          background="rgba(0,0,0,0)"
          v-model="value"
          show-action
        >
         <div slot="action" @click="onSearch">搜索</div>
        </van-search>
    </div>
      <div class="header-swipe">
        <van-swipe :autoplay="3000">
          <van-swipe-item v-for="(item, index) in swipeImage" :key="index">
            <img class="swipeimage" v-lazy="item.image" />
          </van-swipe-item>
        </van-swipe>
      </div>
      <div style="padding: 7px 10px 15px;font-size: 15px;margin: 10px 0 0 0;background:white">热门商家</div>
      <div class="sort">
        <div class="item" v-for="(item,index) in hotStore" :key="index" @click="getStore(item)">
            <van-image round width="4rem" height="4rem" :src="item.avatar"/>
          <p style="font-size: 12px">{{ item.title }}</p>
        </div>
    </div>
    <!-- start banner 广告 -->
    <div style="width: 100%;">
      <div class="banner-swipe">
        <van-swipe :autoplay="3000">
          <van-swipe-item v-for="(item, index) in bannerImage" :key="index">
            <img class="banner-swipeimage" v-lazy="item.image" />
          </van-swipe-item>
        </van-swipe>
      </div>
    </div>
    <!-- end banner 广告 -->
    <!-- start 热销商品 -->
        <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="getStoreList"
      >
     <MerchantGoods :store="store_list" @getProductMerchant="getProductMerchant" @getStore="getStore" />
     </van-list>
    <!-- end 热销商品 -->
    <copyright />
    <c-footer />
  </div>
</template>
<script>

import MerchantGoods from '@/components/MerchantGoods'
import copyright from '@/components/copyright'
export default {
  name: "selfStore",
  data(){
    return {
      swipeImage: null,
      bannerImage :null,
      value: null,
      active: 0,
      recommend:[],
      hotStore:[],
      store_list:[],
      finished: false,
      loading: true,
      c_page: null,
      l_page: null
    };
  },
  created(){
    this.getStoreList();
    this.axios.get('/api/store/merchant/hot/?token='+sessionStorage.getItem("token"))
      .then(res=>{
       if(res.data.code ==200){
         this.hotStore =res.data.data;
       }
      }).catch(error=>{
        console.log(res.data)
      })
    this.getSwiperData();
  },
  methods:{
    getSwiperData() {
            let params = {};
            params.token  = this.accessToken
            this.axios.get('/api/store/user/swiper/merchant',{params}).then(result => {
                this.swipeImage = result.data.data
            })
            // this.axios.get('/api/store/user/swiper/merchantAd',{params}).then(result => {
            //     this.swipeImage = result.data.data
            // })
        },
    getStoreList(){
      let params = {};
      params.token = sessionStorage.getItem("token");
      params.page = this.c_page || 1;
      this.axios.get('/api/store/merchant/store_list/',{ params })
      .then(res=>{
        this.c_page = res.data.data.current_page +1;
        this.l_page = res.data.data.last_page;
        if(res.data.data.current_page <= res.data.data.last_page ){
          if(res.data.data.current_page == 1){
            this.store_list = res.data.data.data;
          }else {
            let arr = [];
            arr = [...this.store_list,...res.data.data.data];
            this.store_list = arr
          }
          this.loading = false;

        }else {
          this.loading = false;
          this.finished = true;
        }
      }).catch(err=>{
        console.log(err)
      })
    },
    goodsData(data){
      let arr = [];
      data.good.forEach((item,index)=>{
        if(index < 4){
          arr.push(item)
        }
      });
      return arr
    },
    getProductMerchant(goods,store){
      this.global.state.productMerchant_store_id = store.id;
      this.global.state.productMerchant_goods = goods;
      this.$router.push({name:'productMerchant',path:'../product/merchant'})
    },
    getStore(e){
      this.$router.push({name:'store',path:'../store'})
      this.global.state.productMerchant_store = e;
    },
    stoteGoodsFilters(goods){
      let arr = [];
      goods.forEach((item,index)=>{
        if(index < 3){
           arr.push(item)
        }
      })
      return arr
    },
    onSearch(){
      if(this.value == null){
        Toast('请输入搜索内容');
      }else {
        this.$router.push({path:'/search',query:{value:this.value}})
      }
    }
  },
  components:{
    copyright,
    MerchantGoods
  }
};
</script>
<style scoped lang="less">
.sort-wrap {
  padding-bottom: 50px;
  .sort {
    display: flex;
    flex-wrap: wrap;
    background-color: white;
    .item {
      padding: 10px 0;
      text-align: center;
      width: 25%;
      p {
        font-size: 16px;
        margin: 0.25rem 0 0;
      }
    }
  }
}
.swipeimage,.banner-swipeimage {
  width: 100%;
}
</style>
